<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>StoreAdmin | GoodsList</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="../lte/css/AdminLTE.min.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body class="hold-transition bg-gray">

<div class="content">

	<div class="box box-primary">
		<div class="box-header with-border">商品列表</div>
		<!-- /.box-header -->
		<div class="box-body">

			<!-- 搜索栏 -->
			<form class="form-inline" method="post">
				<div class="form-group">
					<span>商品分类：</span>
					<div class="input-group">
						<input type="hidden" id="categoryId" name="categoryId" value="0">
						<input type="text" id="categoryName" class="form-control">
						<span class="input-group-addon"><i class="fa fa-search"></i></span>
					</div>
				</div>
				<div class="form-group">
					<span>商品名称：</span>
					<input type="text" name="title" class="form-control">
				</div>
				<div class="form-group">
					<span>状态：</span>
					<select name="status" class="form-control">
						<option value="-1">- 请选择 -</option>
						<option value="1">启用</option>
						<option value="0">禁用</option>
					</select>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-default"><i class="fa fa-search"></i> 查询</button>
					<button type="reset" class="btn btn-default"><i class="fa fa-repeat"></i> 重置</button>
				</div>
			</form>

			<!-- 工具栏 -->
			<div id="toolbar">
				<a class="btn btn-default" href="goods-form.html"><i class="fa fa-plus"></i> 添加</a>
				<button class="btn btn-default"><i class="fa fa-pencil"></i> 修改</button>
				<button class="btn btn-default"><i class="fa fa-check"></i> 启用</button>
				<button class="btn btn-default"><i class="fa fa-ban"></i> 禁用</button>
				<button class="btn btn-default"><i class="fa fa-trash"></i> 删除</button>
			</div>

			<!-- 表格数据 -->
			<table id="table"></table>

		</div>
		<!-- /.box-body -->
	</div>
	<!-- /.box -->

</div>

<!-- REQUIRED JS SCRIPTS -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../lte/js/adminlte.min.js"></script>
<!-- Bootstrap Table -->
<script src="../plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
	$(function () {

		$("#table").bootstrapTable({
			//sidePagination: "server",
			//url: "/examples/bootstrap_table/data",
			//responseHandler: function(res) {return res},
			//queryParams: function(params) {return params},
			toolbar: "#toolbar",
			showRefresh: true,
			pagination: true,
			pageSize: 5,
			idField: "id",
			columns: [
				{field: "ck", checkbox: true},
				{field: "categoryName", title: "所属分类"},
				{field: "itemType", title: "商品系列"},
				{field: "title", title: "商品标题"},
				{field: "barcode", title: "条形码"},
				{field: "price", title: "单价", sortable:true},
				{field: "num", title: "库存数量", sortable:true},
				{field: "status", title: "状态", formatter: statusFormatter},
				{field: "operate", title: "操作", width: "120px", formatter: operateFormatter}
			],
			data: [
				{
					id: 10000000,
					categoryName: "本册/便签",
					itemType: "牛皮纸记事本",
					title: "广博(GuangBo)10本装40张A5牛皮纸记事本子日记本办公软抄本GBR0731",
					barcode: "-",
					price: 23,
					num: 99999,
					status: 1
				}, {
					id: 10000004,
					categoryName: "笔类",
					itemType: "计算器",
					title: "得力（deli）1548A商务办公桌面计算器 太阳能双电源",
					barcode: "-",
					price: 58,
					num: 99999,
					status: 1
				}, {
					id: 10000007,
					categoryName: "笔记本",
					itemType: "燃 7000经典版",
					title: "戴尔Dell 燃700金色",
					barcode: "-",
					price: 4588,
					num: 99999,
					status: 1
				}
			]
		});

		function statusFormatter(value) {
			if (value === 1) {
				return '<span class="label label-info">启用</span>';
			} else {
				return '<span class="label label-default">禁用</span>';
			}
		}

		function operateFormatter() {
			return [
				'<button class="btn btn-primary btn-xs" title="查看"><i class="fa fa-search-plus"></i></button> ',
				'<button class="btn btn-success btn-xs" title="修改"><i class="fa fa-pencil"></i></button> ',
				'<button class="btn btn-danger btn-xs" title="删除"><i class="fa fa-trash"></i></button>'
			].join('');
		}

		// 选择商品分类
		$("#categoryName").click(function () {
			top.layer.open({
				type: 2,
				area: ["320px", "420px"],
				title: "选择商品分类",
				content: "category-tree.html",
				btn: ["确定", "关闭"],
				yes: function (index, layerObj) {
					var zTreeObj = layerObj.find("iframe")[0].contentWindow.zTreeObj;
					var nodes = zTreeObj.getSelectedNodes();
					if (nodes) {
						$("#categoryName").val(nodes[0].name);
						$("#categoryId").val(nodes[0].id);
					}
					top.layer.close(index);
				}
				// cancel: function(){}
			});
		});

	});
</script>

</body>
</html>